<template>
    <div class="Shouyin">
        <h1>收银界面</h1>
        <div class="warp">
            <div class="inputItem">
                <label>输入餐桌编号：<el-input v-model="foot_table_id" placeholder="请输入餐桌编号" clearable></el-input></label>
                <el-button @click="tableId" icon="el-icon-search" type="primary" plain>查询</el-button>
            </div>

            <div class="inputItem">
                <label>输入会员号码：<el-input v-model="phone" placeholder="请输入会员号码" clearable></el-input></label>
                <el-button @click="vipPhone" icon="el-icon-search" type="primary" plain>查询</el-button>
            </div>
            <div class="inputItem" style="color: #b00000">
                <label>结账用户身份：<el-input v-model="vipState" :prefix-icon='vipIcon' :disabled="true"></el-input></label>
                <el-button type="primary" v-if="isShow" @click="addVip">开通会员</el-button>
            </div>

            <template>
                <el-table :data="elTableData" stripe style="width: 70%;float: left">
                    <el-table-column prop="food_table_number" label="餐桌编号" max-width="150"></el-table-column>
                    <el-table-column prop="food_name" label="菜品名称" max-width="250"></el-table-column>
                    <el-table-column prop="food_price" label="菜品单价（元）" max-width="180"></el-table-column>
                    <el-table-column prop="food_count" label="数量（份）" max-width="180"></el-table-column>
                    <el-table-column prop="food_count_money" label="价格（元）" max-width="180"></el-table-column>
                    <el-table-column prop="date" label="操作" max-width="180">
                        <el-button type="danger" plain>删除</el-button>
                    </el-table-column>
                </el-table>

                <div class="rightXia">
                    <label :data="vipData" v-if="vipData.vip_name!=undefined?text='vip姓名：'+vipData.vip_name+'    会员积分：'+vipData.vip_total_consume:'无'">{{text}}</label><br>
                    <label>小计：<el-input v-model="zongMoney" :disabled="true" style="width: 8rem"></el-input> 元</label>
                    <label style="color: #2aabd2" :data="vipData" v-if="vipData.id?isYouHui='会员'+vipData.vip_discount+'折':'无'">优惠：{{isYouHui}}</label><br>
                    <label>共计：<el-input v-model="YhMoney" :disabled="true" style="width: 8rem"></el-input> 元</label>
                    <label>实收：<el-input v-model="sshouMoney" placeholder="0" style="width: 8rem"></el-input> 元</label><br>
                    <label v-if="sshouMoney?buMoney=parseFloat(sshouMoney-YhMoney).toFixed(1):'0'">找补：{{buMoney}} 元</label><br>
                    <el-button type="primary" @click="invoicing" :disabled="isZhuo">结账</el-button>
                </div>

                <div style="width: 70%;float:left;text-align: center">
                    <el-pagination
                            :current-page="elPage"
                            @current-change=elchangePage
                            :page-size=3
                            layout="prev, pager, next"
                            :total="tableData.length">
                    </el-pagination>
                </div>

            </template>

            <ylDialog
                    title="添加会员"
                    :state="addtankuang"
                    :data="form"
                    @noSubmit="backPrePage"
            ></ylDialog>

        </div>
    </div>

</template>

<script>
    import * as api from '../utils/api'
    // import vip from "./vip";
    import ylDialog from "../components/ylDialog";
    export default {
        name: "Shouyin",
        components:{
            ylDialog
        },
        data(){
            return{
                foot_table_id:'',
                isTableUsing:false,
                phone:'',
                vipState:'非会员',
                vipData:[],
                tableData:[],
                isShow:false,
                isYouHui:'无',
                text:'无',
                buMoney:'0',
                vipIcon:'el-icon-circle-close',
                elPage:1,
                xzPage:1,  //选择多少条

                zongMoney:0,
                sshouMoney:0,
                YhMoney:0,

                trueInvoicing:{
                    food_table_id:'',
                    foods:[]
                },

                isZhuo:true,

                form: {
                    vip_name: "",
                    vip_phone: "",
                    vip_discount: "",
                    vip_total_consume: "",
                },
                addtankuang:false
            }
        },
        computed:{
            elTableData(){
                let kaishi=(this.elPage-1)*3
                let jieshu=(this.elPage-1)*3+3
                return this.tableData.slice(kaishi,jieshu)
            }
        },
        created() {
            this.initTable()

            this.foot_table_id=this.$route.params.id
        },
        methods: {
            backPrePage(propsName) {
                this[propsName] = false;
            },
            addVip(){
                this.addtankuang=true
            },
            initTable(){
                this.axios({
                    method:'get',
                    url:api.selectAllOrderingFood,
                }).then(data=>{
                    console.log(data)
                    if (data.data.data.length){
                        this.tableData=data.data.data
                    }else {
                        this.$message({
                            message: '暂无数据',
                            type: 'warning'
                        })
                    }
                })
            },
            tableId() {
                console.log(this.foot_table_id)
                this.axios({
                    url:api.GET_SELECTALLTABLE,
                    method:'get'
                }).then(data=>{
                    console.log(data)
                    data.data.data.map(item=>{
                        if (item.food_table_number===this.foot_table_id&&item.food_table_action===1){
                            this.isTableUsing=true
                        }
                    })

                    if(this.isTableUsing){
                        this.axios({
                            method: 'get',
                            url: api.selectOrderingFoodById,
                            params: {food_table_number: this.foot_table_id}
                        }).then(data => {
                            console.log(data)
                            if (data.data.data.length) {
                                this.tableData = data.data.data
                                // console.log(this.vipData.vip_discount)
                                this.$message({
                                    message: '餐桌查询成功,点餐详情如下表',
                                    type: 'success'
                                })
                            } else {
                                this.$message({
                                    message: '查询成功，但客人未点餐',
                                    type: 'warning'
                                })
                            }
                            console.log(this.tableData)
                            this.tableData.map(item=>{
                                console.log(item)
                                this.zongMoney=this.zongMoney+parseInt(item.food_count_money)
                                // console.log(this.zongMoney)

                                if (item.food_table_number===this.foot_table_id){
                                    this.isZhuo=false
                                }else {
                                    this.isZhuo=true
                                    this.zongMoney=0
                                    this.sshouMoney=0
                                    this.YhMoney=0
                                }
                            })
                            this.YhMoney=parseInt(this.zongMoney)
                            if (this.vipData.vip_discount===undefined){
                                this.vipData.vip_discount=10
                            }
                            this.YhMoney=(parseInt(this.zongMoney)*parseInt(this.vipData.vip_discount)*0.1).toFixed(1)

                            this.isTableUsing=false
                        })
                    }else {
                        this.$message.error('查询失败，餐桌未使用');
                    }


                })

            },
            vipPhone() {
                console.log(this.phone)
                this.axios({
                    method: 'get',
                    url: api.selectMemberVipByPhone,
                    params: {phone: this.phone}
                }).then(data => {
                    console.log(data)
                    if (data.data.data.length) {
                        this.vipData = data.data.data[0]
                        this.vipIcon='el-icon-circle-check'
                        this.vipState='会员'
                        this.isShow=false
                        this.YhMoney=(parseInt(this.zongMoney)*parseInt(this.vipData.vip_discount)*0.1).toFixed(1)
                        console.log(this.YhMoney)

                        console.log(this.vipData)
                        this.$message({
                            message: '会员身份存在',
                            type: 'success'
                        })
                        console.log(this.vipData.vip_name)
                    } else {
                        this.vipData=[]
                        this.vipIcon='el-icon-circle-close'
                        this.vipState='非会员'
                        this.isShow=true

                        this.$message({
                            message: '会员身份不存在',
                            type: 'warning'
                        })
                        console.log(this.vipData.vip_name)
                        this.text='无'
                        this.isYouHui='无'
                    }


                })
            },
            invoicing(){
                console.log(this.sshouMoney)
                console.log(this.YhMoney)
                if (parseFloat(this.sshouMoney)>parseFloat(this.YhMoney)){
                    // console.log('发送请求')
                    let xgVipData={...this.vipData}
                    xgVipData.vip_total_consume=xgVipData.vip_total_consume+parseFloat(this.YhMoney)
                    // console.log(this.tableData)
                    this.trueInvoicing.food_table_id=this.tableData[0].food_table_id
                    this.tableData.map(item=>{
                        this.trueInvoicing.foods.push({food_id:item.food_id})
                    })
                    // console.log(this.trueInvoicing)
                    this.axios({
                        method:'post',
                        url:api.deleteOrderingFoodById,
                        data:this.trueInvoicing
                    }).then(data=>{
                        console.log(data)
                        this.$message({
                            message: data.data.msg,
                            type: 'success'
                        })
                        if (xgVipData.vip_name){
                            this.axios({
                                method:'post',
                                url:api.updateMemberVipById,
                                data:xgVipData
                            }).then(data=>{
                                if (data.data.code===200){
                                    this.$message({
                                        message: '会员更新',
                                        type: 'success'
                                    })
                                    this.initTable()
                                }
                            })
                        }else {
                            this.initTable()
                        }


                    })


                }else if (this.sshouMoney<this.YhMoney&&this.sshouMoney>0){
                    this.$message({
                        message: '实收金额小于消费金额哟',
                        type: 'warning'
                    })
                }else {
                    this.$message({
                        message: '未输入实收金额哟',
                        type: 'warning'
                    })
                }


            },

            elchangePage(val){
                // console.log(val)
                this.elPage=val
            },
        }
    }
</script>

<style lang="less" scoped>
    .Shouyin{
        /*border: 1px solid red;*/
        font-size: 1.2rem;
        /*color: rgb(144,147,153);*/
    }
    .clear{
        content: "";
        display: block;
        clear: both;
    }
    .warp{
        /*border: 1px solid red;*/
        padding: 2rem 0;
        text-align: left;
    }
    .inputItem{
        /*border: 1px solid red;*/
        height: 4rem;
        .el-input{
            width: 20rem;
            height: 3rem;
            margin-right: 1rem;
        }
        .el-button{
            width: 6rem;
            height: 3rem;
            padding: 0;
        }
    }
    .el-table{
        margin: 2rem 0 1rem;
    }
    .el-pagination{
        margin-top: 4rem;
    }
    .rightXia{
        width: 20%;
        /*border: 1px solid red;*/
        float: right;
        text-align: center;
        /*margin-top: 1.5rem;*/
        .el-input{
            height: 1rem;
        }
        label{
            float: left;
            text-align: left;
            margin: 1.3rem;
            display: block;
            /*border: 1px solid red;*/
            width: 20rem;
        }
        .el-button{
            float: left;
            margin: 2rem 4rem;
            display: block;
            width: 10rem;
        }
    }
</style>